<template>
  <div class="m-title">
    <h1 class="title">普吉岛+皇帝岛+小皇帝岛豪华游轮一日游·返程可在神仙半岛海域看日出</h1>
    <ul class="advantage">
      <li class="item1"></li>
      <li class="item2">中文服务</li>
      <li class="item3">酒店接送</li>
      <li class="item4">无购物</li>
    </ul>
    <hr/>
    <ul class="tips clear-float">
      <li class="tip0"></li>
      <li class="tip1">协商可退</li>
      <li class="tip0"></li>
      <li class="tip2">6小时确认</li>
      <li class="tip4">已售33961</li>
      <li class="tip3"></li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'm-title',
    data () {
      return {
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .m-title{
    width: 100%;
    height: 2.82rem;
    padding-left: 0.3rem;
    padding-top: 0.23rem;
    padding-right: 0.3rem;
    margin-bottom: 0.28rem;
    border-bottom: 1px solid #D7D7D7;
    background-color: #FFF;
  }
  h1{
    margin-top:0;
    margin-bottom: 0.14rem;
    font-size:0.32rem;
    color: #333;
    font-weight: bold;
  }
  ul,li{
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .advantage>li{
    display: inline-block;
    vertical-align:top;

  }
  .advantage{
    font-size:0.22rem;
    color: #666;
    height: 0.32rem;
  }
  .advantage>.item1{
    width: 1rem;
    height: 0.32rem;
    line-height: 0.32rem;
    margin-right: 0.1rem;
  }
  .item2,.item3{
    width: 1.04rem;
    height: 0.32rem;
    line-height: 0.32rem;
    padding-bottom: 0.128rem;
    border: 1px solid #CFCFCF;
    border-radius: 1px;
    margin-right: 0.1rem;
    text-align: center;
  }
  .item4{
    width: 0.82rem;
    height: 0.32rem;
    line-height: 0.32rem;
    padding-bottom: 0.128rem;
    border: 1px solid #CFCFCF;
    border-radius: 1px;
    text-align: center;
  }
  .clear-float:after{
    display: block;
    content: '';
    clear: both;
  }
  /*hr{*/
    /*!*宽度超过设计稿的50%最好用百分比，不要用rem*!*/
    /*!*因为我设置了box-sizing：border-box，因此此处的width的百分比是依据父元素的content的宽度来计算的，而不是css中直接设置的*!*/
    /*width: 104.347%;*/
    /*border-top:0.02rem solid #E1E1E1;*/
    /*border-right:0;*/
    /*border-bottom: 0;*/
    /*border-left: 0;*/
    /*margin:0.3rem 0;*/
  /*}*/
  .tips{
    height: 0.36rem;
    font-size: 0.28rem;
  }
  .tips>.tip0{
    width: 0.28rem;
    height: 0.28rem;
    float: left;
  }
  .tips>.tip1,.tips>.tip2{
    float: left;
    margin-left: 0.1rem;
    margin-right: 0.2rem;
    margin-top: -0.03rem;
    color: #6CC37B;
  }
  .tips>.tip3{
    width: 0.32rem;
    height: 0.32rem;
    float: right;
    margin-right: 0.08rem;
  }
  .tips>.tip4{
    float: right;
    font-size: 0.24rem;
    color: #999;
    text-align: right;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 1),
  only screen and (min--moz-device-pixel-ratio: 1),
  only screen and (-o-min-device-pixel-ratio: 1/1),
  only screen and (min-device-pixel-ratio: 1){
    .advantage>.item1{
      background-image: url("../../assets/image/operation_tag.png");
      background-size: cover;
      background-repeat: no-repeat;

    }
    .tip0{
      background-image: url("../../assets/image/service.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
    .tip3{
      background-image: url("../../assets/image/secondary_dp.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2),
  only screen and (min-device-pixel-ratio: 1.5){
    .advantage>.item1{
      background-image: url("../../assets/image/operation_tag@2x.png");
      background-size: contain;
      background-repeat: no-repeat;

    }
    .tip0{
      background-image: url("../../assets/image/service@2x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
    .tip3{
      background-image: url("../../assets/image/secondary_dp@2x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2/1),
  only screen and (min-device-pixel-ratio: 2){
    .advantage>.item1{
      background-image: url("../../assets/image/operation_tag@3x.png");
      background-size: contain;
      background-repeat: no-repeat;

    }
    .tip0{
      background-image: url("../../assets/image/service@3x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
    .tip3{
      background-image: url("../../assets/image/secondary_dp@3x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
</style>
